import { ref, onMounted, onUnmounted } from 'vue'

// 视口高度修复
export function useViewportFix() {
  const vh = ref(window.innerHeight * 0.01)
  
  // 更新视口高度变量
  const updateViewportHeight = () => {
    vh.value = window.innerHeight * 0.01
    document.documentElement.style.setProperty('--vh', `${vh.value}px`)
    
    // 移除对tab-bar高度的特殊处理，因为它现在是页面的一部分
  }
  
  onMounted(() => {
    updateViewportHeight()
    window.addEventListener('resize', updateViewportHeight)
    // 添加一个延迟执行，确保在DOM完全渲染后再次计算
    setTimeout(updateViewportHeight, 300)
    // 再添加一个更长的延迟，处理某些设备上的延迟渲染
    setTimeout(updateViewportHeight, 1000)
  })
  
  onUnmounted(() => {
    window.removeEventListener('resize', updateViewportHeight)
  })
  
  return {
    vh
  }
}